﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html class="no-js" lang="">

<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cirkle | User Friends</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/static/media/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/icofont/icofont.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick-theme.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/magnific-popup/css/magnific-popup.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/mcustomscrollbar/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/select2/css/select2.min.css">

    <!-- Site Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/app.css">
    <!-- Google Web Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">
</head>

<body class="bg-link-water">
    <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="${pageContext.request.contextPath}/Directory/https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
    <![endif]-->
    <a href="#wrapper" data-type="section-switch" class="scrollup">
        <i class="icofont-bubble-up"></i>
    </a>
    <!-- Preloader Start Here -->
    <div id="preloader"></div>
    <!-- Preloader End Here -->
    <div id="wrapper" class="wrapper">
        <!-- Top Header -->
        <%@include file="top.jsp" %>
        <!-- Sidebar Left -->
        <%@include file="left.jsp" %>
        <!-- Sidebar Right -->
        <%@include file="right.jsp" %>
        <!-- Page Content -->
        <div class="page-content">

            <!--=====================================-->
            <!--=        Newsfeed  Area Start       =-->
            <!--=====================================-->
            <div class="container">
                <!-- Banner Area Start -->
                <div class="banner-user">
                    <div class="banner-content">
                        <div class="media">
                            <div class="item-img">
                                <img src="${pageContext.request.contextPath}/static/img/${sos.uimg}" style="width: 115px" alt="User">
                            </div>
                            <div class="media-body">
                                <h3 class="item-title">${sos.uname}</h3>
                                <div class="item-subtitle">${sos.ublog}</div>
                                <ul class="item-social">
                                    <li><a href="#" class="bg-fb"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="#" class="bg-twitter"><i class="icofont-twitter"></i></a></li>
                                    <li><a href="#" class="bg-dribble"><i class="icofont-dribbble"></i></a></li>
                                    <li><a href="#" class="bg-youtube"><i class="icofont-brand-youtube"></i></a></li>
                                    <li><a href="#" class="bg-behance"><i class="icofont-behance"></i></a></li>
                                </ul>
                                <ul class="user-meta">
                                    <li>帖子: <span>${sos.uposts}</span></li>
                                    <li>评论: <span>${sos.ucomments}</span></li>
                                    <li>地址: <span>${sos.uaddress}</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="block-box user-top-header">
                    <ul class="menu-list">
                        <li class="active"><a href="${pageContext.request.contextPath}/Directory/#">时间线</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">关于</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">朋友们</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">团体</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">相片</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">影片</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">徽章</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">网志</a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#">讨论区</a></li>
                        <li>
                            <div class="dropdown">
                                <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                    ...
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="${pageContext.request.contextPath}/Directory/#">Shop</a>
                                    <a class="dropdown-item" href="${pageContext.request.contextPath}/Directory/#">Blog</a>
                                    <a class="dropdown-item" href="${pageContext.request.contextPath}/Directory/#">Others</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="block-box user-search-bar">
                    <div class="box-item search-box">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search Member">
                            <div class="input-group-append">
                                <button class="search-btn" type="button"><i class="icofont-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="box-item search-filter">
                        <div class="dropdown">
                            <label>Order By:</label>
                            <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Newest Member</button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">All Member</a>
                                <a class="dropdown-item" href="#">Newest Member</a>
                                <a class="dropdown-item" href="#">Oldest Member</a>
                            </div>
                        </div>
                    </div>
                    <div class="box-item search-switcher">
                        <ul class="user-view-switcher">
                            <li class="active">
                                <a class="user-view-trigger" href="${pageContext.request.contextPath}/Directory/#" data-type="user-grid-view">
                                    <i class="icofont-layout"></i>
                                </a>
                            </li>
                            <li>
                                <a class="user-view-trigger" href="${pageContext.request.contextPath}/Directory/#" data-type="user-list-view">
                                    <i class="icofont-listine-dots"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="user-view" class="user-grid-view">
                    <div class="row gutters-20">


                        <c:forEach var="l" items="${page.rows}" varStatus="v"><div class="col-xl-3 col-lg-4 col-md-6">
                            <div class="widget-author">
                                <div class="author-heading">
                                    <div class="cover-img">
                                        <img src="${pageContext.request.contextPath}/static/media/figure/cover_${v.count}.jpg" alt="cover">
                                    </div>
                                    <div class="profile-img">
                                        <a href="#">
                                            <img src="${pageContext.request.contextPath}/static/img/${l.uimg}" style="width: 100px"  alt="author">
                                        </a>
                                    </div>
                                    <ul class="author-statistics">
                                        <li>
                                            <a href="${pageContext.request.contextPath}/friend/shanyou?id=${l.firend.fid}"><span class="item-number" style="border: #FF5934 1px solid;background-color: #FF5934;padding: 7px 7px 7px 7px;color: #ffffff;border-radius: 5px;font-size: 15px;margin-bottom: 10px">- 取消</span></a>
                                        </li>


                                    </ul>
                                    <h4 class="author-name"><a href="${pageContext.request.contextPath}/Directory/user-timeline">${l.uname}</a></h4>
                                    <div class="profile-name">
                                        <div class="author-location" style="margin-bottom: 10px">${l.ublog}</div>
                                    </div>
                                </div>


                                <ul class="author-badge" style="margin-bottom: 10px">
                                    <li><a href="#" class="bg-salmon-gradient"><i class="icofont-star"></i></a></li>
                                    <li><a href="#" class="bg-amethyst-gradient"><i class="icofont-ui-play"></i></a></li>
                                    <li><a href="#" class="bg-sun-gradient"><i class="icofont-squirrel"></i></a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#" class="bg-jungle-gradient"><i class="icofont-rocket-alt-1"></i></a></li>
                                </ul>



                                <ul class="author-statistics">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/#"><span class="item-number">${l.ucomments}</span> <span class="item-text">评论数</span></a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/#"><span class="item-number">${l.uposts}</span> <span class="item-text">帖子数</span></a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        </c:forEach>











                </div>
                    <div class="pagination">
                        <ul>
                            <c:forEach begin="1" end="${page.pageCount}" var="p">
                                <li>
                                    <a href="${pageContext.request.contextPath}/friend/friends?curPage=${p}"
                                            <c:if test="${page.curPage==p}">
                                                class="active"</c:if> >
                                            ${p}
                                    </a>
                                </li>
                                <%--<li><a href="#" class="active">1</a></li>
                                <li><a href="#">2</a></li>--%>
                            </c:forEach>
                        </ul>
                    </div>
            </div>
            <!--=====================================-->
            <!--=        Footer Area Start       	=-->
            <!--=====================================-->
            <footer class="footer-wrap footer-dashboard">
                <div class="main-footer">
                    <div class="container">
                        <div class="row row-cols-lg-4 row-cols-sm-2 row-cols-1">
                            <div class="col">
                                <div class="footer-box">
                                    <div class="footer-logo">
                                        <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo_dark.png" alt="Logo"></a>
                                    </div>
                                    <p>Dorem ipsum dolor sit amet consec adipisicing elit sed do eiusmod por incidiut labore et loreLorem ipsum kelly amieo dolorey.</p>
                                </div>
                            </div>
                            <div class="col d-flex justify-content-lg-center">
                                <div class="footer-box">
                                    <h3 class="footer-title">
                                        Important Links
                                    </h3>
                                    <div class="footer-link">
                                        <ul>
                                            <li><a href="${pageContext.request.contextPath}/Directory/index">Home</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/about-us">About us</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/shop">Shop</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/contact">Contacts</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col d-flex justify-content-lg-center">
                                <div class="footer-box">
                                    <h3 class="footer-title">
                                        Community
                                    </h3>
                                    <div class="footer-link">
                                        <ul>
                                            <li><a href="${pageContext.request.contextPath}/Directory/newsfeed">NewsFeed</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/user-timeline">Profile</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/user-friends">Friends</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/user-groups">Groups</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/forums">Forums</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col d-flex justify-content-lg-center">
                                <div class="footer-box">
                                    <h3 class="footer-title">
                                        Followers
                                    </h3>
                                    <div class="footer-link">
                                        <ul>
                                            <li><a href="${pageContext.request.contextPath}/Directory/https://www.facebook.com/">facebook</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/https://twitter.com/">twitter</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/https://www.instagram.com/">instagram</a></li>
                                            <li><a href="${pageContext.request.contextPath}/Directory/https://www.youtube.com/">Youtube</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="footer-copyright">Copy© cirkle 2021. All Rights By <a href="${pageContext.request.contextPath}/Directory/http://www.bootstrapmb.com/">bootstrapmb</a></div>
                </div>
            </footer>



        </div>
        <!-- Chat Modal Here -->
        <div class="chat-conversion-box" id="chat-box-modal" tabindex="-1" aria-labelledby="chat-modal-label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="chat-modal-label">Fahim Rahman <span class="online"></span></h6>
                        <div class="action-icon">
                            <button class="chat-shrink"><i class="icofont-minus"></i></button>
                            <button type="button" class="close chat-close chat-open" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                    <div class="modal-body">
                        <ul class="chat-conversion">
                            <li class="chat-others">
                                <div class="author-img">
                                    <img src="${pageContext.request.contextPath}/static/media/figure/chat_12.jpg" alt="Chat">
                                </div>
                                <div class="author-text">
                                    <span>How are you Fahim vai ? Tommorow office will be your last day of Bachelor life.</span>
                                </div>
                            </li>
                            <li class="chat-you">
                                <div class="author-img">
                                    <img src="${pageContext.request.contextPath}/static/media/figure/chat_11.jpg" alt="Chat">
                                </div>
                                <div class="author-text">
                                    <span>hmm That's great</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Write your text here.....">
                                <div class="chat-plus-icon"><i class="icofont-plus-circle"></i></div>
                                <div class="file-attach-icon">
                                    <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-slightly-smile"></i></a>
                                    <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-camera"></i></a>
                                    <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-image"></i></a>
                                    <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-mic"></i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Jquery Js -->
    <script src="${pageContext.request.contextPath}/static/dependencies/jquery/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/popper.js/js/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/slick-carousel/js/slick.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/select2/js/select2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/elevate-zoom/jquery.elevatezoom.js"></script>
    <script src="${pageContext.request.contextPath}/static/dependencies/bootstrap-validator/js/validator.min.js"></script>
    <script src="http://www.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>

    <!-- Site Scripts -->
    <script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
</body>

</html>
